<template>
<div class="index-header-nav">
    <div class="header-nav-left bg" :style="{backgroundImage:'url('+carousel.url+')'}" ></div>
    <div  class="header-nav-right">
        <Row class="header-nav-top">
            <Col span="15" class="font">
                <span v-if="is_landing">{{userName}}，</span><span>您好，欢迎来到秦皇岛企业网上金融服务平台</span>
            </Col>
            <Col span="9" class="nav-top" >
                <ul>
                    <li><a @click="handlePost"><span>信息发布</span></a></li>
                    <li v-if="is_landing" @click="handleMemberCenter"><a>会员中心</a></li>
                    <li v-if="is_landing" @click="logOut"><a>安全退出</a></li>
                    <li v-if="!is_landing"> <router-link :to="{name:'login'}"><span class="icon"><Icon type="person" color="#ffffff"></Icon></span>登录</router-link></li>
                    <li v-if="!is_landing"><router-link :to="{name: 'register'}"><span class="icon"><Icon type="person-add"></Icon></span>注册</router-link></li>
                </ul>
            </Col>
        </Row> 
        <div class="header-nav-bottom font">
            <ul>
                <li  v-for="(item,index) in nav" >
                    <router-link  :to="{path:item.link}">{{item.title}}</router-link>
                    <ul class="nav-items">
                        <li v-for="item2 in item.children"> <router-link :to="{path:item2.link}"> {{item2.title}}</router-link></li>
                    </ul>   
                </li>   
            </ul>
        </div>
    </div> 
</div>
</template>
<script>
import Cookies from 'js-cookie';
import util from "../../libs/util";
export default {
    name: "MainNav",
    props:{
        logo: {
            type: Array
        },
    },
    data () {
        return {
            login: true,
            register: true,
            is_landing: false,
            nav:[
                {title:"首页",link:"/index"},
                {title:"金融服务",link:"#",
                children:[
                    { title:"找服务",link:"/index/find_service" },
                    { title:"找需求",link:"/index/find_demand" },
                    { title:"平台服务",link:"/index/specialservice_list" },
                    // { title:"直接融资",link:"/index/find_service" },
                    // { title:"企业上市",link:"/index/find_service" },
                    // { title:"科技专项",link:"#" },
                    // { title:"培训咨询",link:"#" }
                ]},
                {title:"通知公告",link:"/index/article/list/notice/*"},
                {title:"新闻资讯",link:"/index/article/list/news/*"},
                {title:"政策法规",link:"/index/article/list/laws/*"},
                {title:"帮助中心",link:"",children:[
                    {title:"帮助文档",link:"/index/help"},
                    {title:"问题反馈",link:"/index/question"},
                    {title:"关于我们",link:"/index/about"}
                ]},
                {title:"站内搜索",link:"/index/searchall"}
            ],
        }
    },
    methods:{
        logOut() {
            this.api.post('member/logout', res => {
                this.$store.commit("logout", this);
                this.$router.push({ name: 'index' });
                this.is_landing = false;
            });          
        },
        handlePost() {
            window.location.href = util.getRuntimeUrl('member', this.user_info.role_type == 5 ? 'service_manage/posted_projects' : 'demand_manage/posted_projects');
        },
        handleMemberCenter() {
            window.location.href = util.getRuntimeUrl('member', 'home');
        }
    },
    computed: {
        user_info() {
            return this.$store.state.user.info;
        },
        userName(){
            return this.$store.state.user.info.username;
        },
        tree(){
            return this.$store.state.app.dicTree;
        },
        carousel(){
            var carousel = {url:require('../../images/banner_1-ec70a4.jpg')};
            if(this.logo.length != 0){
                for(var i = 0; i < this.logo.length; i++){
                    carousel = this.logo[i].logo[0];
                }
            }
            return carousel;
        }
    },
    created() {
        this.is_landing = Cookies.get('access') == "member";
    }
}
</script>
<style scoped>
      .banner{
        width: 100%;
        height: 500px;
        min-width:960px;
    }
    .font {
        font-family: "微软雅黑";
    }
    /* 头部开始 */
    .index-header-nav{
        width: 58%;
        min-width: 960px;
        height: 100px; 
        margin: 0 auto;
        position: relative;
        top: 20px;
        z-index: 2;
        background: url('../../images/bgitem.png') repeat;   
    }
 
    .header-nav-left{
        width: 23%;
        float: left;
        height: 100px;
    }
    .header-nav-right{
        float: right;
        width: 77%;
        height: 100px;
    }
    .header-nav-top{
        height:45px;
        line-height: 45px;
        width: 100%;
        background:url(../../images/line.png) repeat right top;
        color: #ffffff;
        font-size: 18px;
        padding-left:25px;
    }
    .nav-top ul{
        float: left;
        width: 100%;
    }
    .nav-top li{
        float: right;
        width: 30%;
        border-left: 1px solid #143f87;
    }
    .nav-top a{
        display: block;
        width: 100%;
        height:45px;
        line-height: 45px;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
    }
    .nav-top a:hover{
        background-color: #bec9ca;
    }
    .icon{
        height: 5px;
        width: 5px;
        margin: 0 8px;
    }
    .header-nav-bottom{
        height:55px;
        width: 100%;
        position: relative;
    }
    .header-nav-bottom>ul{
        width: 100%;
        position: absolute;
        top: 0px;
        z-index: 2;
    }
    .header-nav-bottom>ul>li{
        float: left;
        width: 14.28%;
        background-color: #143f87;
    }
    .header-nav-bottom>ul>li>a{
        display: block;
        width: 100%;
        height: 55px;
        line-height: 55px;
        text-decoration: none;
        color: #ffffff;
        font-size: 18px;
        text-align: center;
    }
    .header-nav-bottom a:hover{
        background-color:rgb(15, 144, 199);
    }
    .nav-items{
        display: none;
        overflow: hidden;
    }
    .nav-items li{
        height:55px;
        width: 100%;
    }
    .nav-items a{
        display: block;
        height: 55px;
        line-height: 55px;
        width: 100%;
        text-decoration: none;
        color:#ffffff;
        text-align: center;
        font-size: 18px;
    }
    @keyframes navs {
        form{
            height:0;
        };
        to{
            height: 300px;
        }
    }
     .header-nav-bottom>ul>li:hover .nav-items{
        display: block;
        animation: navs 1.5s forwards;

     }
    .bg{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;
    }
</style>